import React from 'react'
import DutySelect from './DutySelect'

const sessionUser={
    "id": "2101",
    "name": "王朋飞"
}

let fetchDate={
  "onCusDutySraffArr": [
    {
        "id": "2107",
        "name": "刘静杰"
    }
  ]
}

class App extends React.Component {

  state = {
    onCusDutySraffArr:[],
    onDutyInsideStaffArr:[]
  }

  addItem = () => {
    console.log('addItem');
    fetchDate.onCusDutySraffArr.push(sessionUser)
    this.getSignedNum()
  };
  
 removeItem = () => {
    fetchDate.onCusDutySraffArr= fetchDate.onCusDutySraffArr.filter(u=>u.id!=sessionUser.id)
    this.getSignedNum()
  };
  
  getSignedNum=()=>{
    this.state.onCusDutySraffArr=fetchDate.onCusDutySraffArr;
    this.setState({onCusDutySraffArr: this.state.onCusDutySraffArr})
  }

  componentDidMount() {

    this.getSignedNum();
   
 }
  
  render(){
      let operateItem;
      let operateItemType="";
      let dataArr= this.state.onCusDutySraffArr;
      if(dataArr.map(u=>u.id).includes(sessionUser.id)){
        operateItem=this.removeItem
        operateItemType="removeItem"
      }else{
        operateItem=this.addItem;
        operateItemType="addItem"
      }

    return (
      <div>
             <DutySelect data={{dataArr,operateItem,operateItemType}}/>
              <br/>   <br/>   <br/>   <br/>   <br/>
                <DutySelect data={{dataArr: [
                    {
                        "id": "2107",
                        "name": "刘静杰"
                    }
                  ],operateItem:{},operateItemType:{}}}/>
             </div>
    );
  }

}

export default App;
